<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>核酸信息概览</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="../lib/element2.13.0/lib-master/theme-chalk/index.css"/>
    <script src="../lib/vue/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/layer/layer.js"></script>
    <script src="../lib/element2.13.0/lib-master/index.js"></script>
    <script type='text/javascript' src='../lib/axios/dist/axios.js'></script>
</head>
<body>
<div id="table">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <el-input v-model="inputForReportId" placeholder="请输入报告单号" style="width: 18%;margin-left: 1%" clearable></el-input>
            <el-input v-model="inputForIdNumber" placeholder="请输入身份证号" style="width: 18%;margin-left: 1%"
                      maxlength="18"
                      show-word-limit
                      clearable></el-input>
            <el-select v-model="selectValue" placeholder="请选择检测结果" style="width: 12%;margin-left: 1%" clearable>
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-date-picker
                    v-model="samplingTime"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    style="width: 25%;margin-left: 1%">
            </el-date-picker>
            <el-button type="primary" icon="el-icon-search" style="margin-left: 3%" @click="queryByInput">搜索</el-button>
            <el-button type="info" plain @click="clearInput">清空</el-button>
        </div>
        <template>
            <el-table :data="pageTable.tableData" border style="width: 100%; height:100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="报告ID">
                                <span>{{ props.row.reportId }}</span>
                            </el-form-item>
                            <el-form-item label="采样时间">
                                <span>{{ props.row.samplingTime }}</span>
                            </el-form-item>
                            <el-form-item label="被采样人">
                                <span>{{ props.row.isSamplingPerson.name }}</span><br/>
                                <span>{{ props.row.isSamplingPerson.idNumber }}</span>
                            </el-form-item>
                            <el-form-item label="采样人">
                                <span>{{ props.row.samplingPerson.name }}</span><br/>
                                <span>{{ props.row.samplingPerson.idNumber }}</span>
                            </el-form-item>
                            <el-form-item label="采样地点">
                                <span>{{ props.row.samplingPlace }}</span>
                            </el-form-item>
                            <template v-if="props.row.detectResult !== undefined">
                                <el-form-item label="检测机构">
                                    <span>{{ props.row.detectHospital }}</span>
                                </el-form-item>
                                <el-form-item label="检测人">
                                    <span>{{ props.row.detectPerson.name }}</span><br/>
                                    <span>{{ props.row.detectPerson.idNumber }}</span>
                                </el-form-item>
                                <el-form-item label="检测时间">
                                    <span>{{ props.row.detectTime }}</span>
                                </el-form-item>
                                <el-form-item label="检测结果">
                                    <span>{{ props.row.detectResult }}</span>
                                </el-form-item>
                            </template>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column type="index" :index="indexMethod" label="序号" align="center" width="50">
                </el-table-column>
                <el-table-column prop="isSamplingPerson.name" label="被采样人" align="center" width="180">
                </el-table-column>
                <el-table-column prop="samplingTime" label="采样时间" width="180">
                </el-table-column>
                <el-table-column prop="detectHospital" label="检测机构">
                </el-table-column>
                <el-table-column prop="detectResult" label="检测结果">
                </el-table-column>

                <el-table-column fixed="right" align="center" label="操作" width="200">
                    <template slot-scope="props">
                        <template v-if="props.row.detectResult === undefined">
                            <el-button type="success" size="mini" icon="el-icon-upload"
                                       @click="uploadResult(props.row)">上传检测结果
                            </el-button>
                        </template>

                    </template>
                </el-table-column>
                <el-dialog title="上传检测结果" :visible.sync="dialogFormVisible" :append-to-body="true" height="30%" center>
                    <el-form ref="uploadResultForm" :model="uploadResultForm" :rules="rules">
                        <el-form-item label="报告单号" prop="reportId">
                            <el-input v-model="uploadResultForm.reportId" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="检测机构" prop="detectHospital">
                            <el-input v-model="uploadResultForm.detectHospital"></el-input>
                        </el-form-item>
                        <el-form-item label="检测人姓名" prop="detectPerson.name">
                            <el-input v-model="uploadResultForm.detectPerson.name"></el-input>
                        </el-form-item>
                        <el-form-item label="检测人身份证号" prop="detectPerson.idNumber">
                            <el-input v-model="uploadResultForm.detectPerson.idNumber" maxlength="18" minlength="18" show-word-limit clearable></el-input>
                        </el-form-item>
                        <el-form-item label="检测结果" prop="detectResult">
                            <el-select v-model="uploadResultForm.detectResult" placeholder="请选择">
                                <el-option label="阴性" value="阴性"></el-option>
                                <el-option label="阳性" value="阳性"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="text-align: center;">
                            <el-button type="primary" @click="onSubmit('uploadResultForm')">提交</el-button>
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </el-table>
        </template>
        <!-- 分页 -->
        <div class="block" style="margin-top: 20px;text-align: right;">
            <el-pagination background
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="pageTable.pageNum"
                           :page-sizes="[10, 20, 30, 40]" :page-size="pageTable.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="pageTable.total">
            </el-pagination>
        </div>
    </el-card>
</div>
</body>
<style>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
<script src="./table.js"></script>
</html>
